<!-- 申请中心-离职申请、被动离职申请弹出框 -->
<template>
  <a-modal
    width="50%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
  >
    <template #title>
      <div>
        {{ type === 1 ? '离职申请' : '被动离职申请' }}
      </div>
    </template>
    <a-form :model="formData" layout="vertical">
      <a-form-item label="请选择离职类型：" field="">
        <a-select style="width: 200px" v-model="formData.quitType">
          <a-option>1</a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="请选择离职原因：" field="">
        <a-select style="width: 200px" v-model="formData.quitReason">
          <a-option>1</a-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    /*
      1 离职申请
      2 被动离职申请
      3 合并
      4 启用
      5 停用
    */
    type: number;
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'ApplyCenterQuitEmit']);

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit('update:visible', visible);
  }
});

watch(
  () => modalVisible.value,
  (newVal: boolean) => {
    if (newVal) {
      // 如果显示弹出框则初始化数据和获取数据库数据
      for (let i in formData) {
        formData[i] = undefined;
      }
      getData();
    }
  }
);

const formData: any = reactive({
  quitType: undefined,
  quitReason: undefined
});

const getData = () => {
  try {
    //
  } catch (error: unknown) {
    console.log(error);
  }
};

// 保存
const handleOk = () => {
  emit('ApplyCenterQuitEmit', formData);
  modalVisible.value = false;
};

// 取消
const handleCancel = () => {
  modalVisible.value = false;
};
</script>

<style scoped lang="less">
:deep(.arco-form-item-label-col),
:deep(.arco-form-item-content-flex) {
  justify-content: center;
}

:deep(.arco-form-item-label) {
  position: relative;
  right: 45px;
}
</style>
